<style type="text/css">
    #scroll_wrapper {
        z-index: 1;
        background-color: #ffffff;
    }
    div.title {
        margin: 5px;
        text-align: center;
        border: 1px solid #5c8e0f;
        height: 40px;
        line-height: 40px;
        vertical-align: middle;
        position: relative;
        font-weight: 600;
        font-size: 16px;
    }

    .title>.left {
        display: block;
        font-size: 20px;
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 8px;
        font-weight: 600;
        color: #0000ff;
        cursor:pointer;
    }

    .title>.right {
        display: block;
        font-size: 20px;
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 8px;
        font-weight: 600;
        color: #0000ff;
        cursor:pointer;
    }

    .table {
        width: 100%;
    }

    .year {
        background-color: orange;
        height: 100px;
        text-align: center;
        border-radius: 5px;
        position: relative;
        font-weight: 700;
        font-size: 22px;
        color: #fff;
        border: 1px solid #d4d4f5;
    }

    .month>div,
    .year>div {
        padding-top: 10px;
    }

    .month {
        background-color: orange;
        height: 100px;
        text-align: center;
        border-radius: 5px;
        position: relative;
        font-weight: 700;
        font-size: 22px;
        color: #fff;
        border: 1px solid #d4d4f5;
    }
    .table1{
        width: 100%;
    }
    .table1 td {
        width: 33%;
        height: 100px;
        border: 1px solid #d4d4f5;
        text-align: center;
    }
    .table1 td>div {
        text-align: center;
        height: 100%;
    }
    .table1 td>div>div {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
    .table1 tr:nth-child(1)>td:nth-child(2),.table1 tr:nth-child(3)>td:nth-child(2){
        background-color: #f0f0f0;
    }
    .table1 tr:nth-child(2)>td:nth-child(1),.table1 tr:nth-child(2)>td:nth-child(3){
        background-color: #E8F4F0;
        border-color: #A1C0B5;
    }
    .table1 tr {
        border: 1px solid #d4d4f5;
    }

    .table2 {
        width: 100%;
    }

    .btn {
        margin-top: 10px;
        height: 30px;
        text-align: center;
        border-radius: 0px;
        line-height: 30px;
        border: 1px solid #A1C0B5;
    }
    .table2 td:nth-child(2)>div{
        background-color: #f0f0f0;
    }
    .table2 td:nth-child(1)>div, .table2 td:nth-child(3)>div{
        background-color: #E8F4F0;
    }

</style>
<div class="title">
    <div class="left" onclick="preMonth()">《上月</div><span data-title="">2018年8月工资信息</span>
    <div class="right" onclick="nextMonth()">下月》</div>
</div>
<table class="table">
    <tr>
        <td width="50%">
            <div class="year">
                <div>本年累计</div>
                <div id="tj0"></div>
            </div>
        </td>
        <td width="50%">
            <div class="month">
                <div>本月实发</div>
                <div id="shifa"></div>
            </div>
        </td>
    </tr>
</table>
<table class="table1" cellpadding="0">
    <tr>
        <td>
            <div>
                <div onclick="showT1()">月度工资</div>
                <div id="tj1"></div>
            </div>
        </td>
        <td>
            <div>
                <div onclick="showT2()">补贴津贴</div>
                <div id="tj2"></div>
            </div>
        </td>
        <td>
            <div>
                <div onclick="showT3()">计件超产</div>
                <div id="tj3"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <div onclick="showT4()">年度奖金</div>
                <div id="tj4"></div>
            </div>
        </td>
        <td>
            <div>
                <div onclick="showT5()">其它收入</div>
                <div id="tj5"></div>
            </div>
        </td>
        <td>
            <div>
                <div onclick="showT6()">代扣税</div>
                <div id="tj6"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <div onclick="showT7()">五险一金</div>
                <div id="tj7"></div>
            </div>
        </td>
        <td>
            <div>
                <div onclick="showT8()">所得税</div>
                <div id="tj8"></div>
            </div>
        </td>
        <td>
            <div>
                <div onclick="showT9()">税后代扣</div>
                <div id="tj9"></div>
            </div>
        </td>
    </tr>
</table>

<table class="table2">
    <tr>
        <td width="33%">
            <div class="btn" onclick="showDetailed()">详细工资单</div>
        </td>
        <td width="33%">
            <div class="btn" onclick="showJiajian()">应加应扣</div>
        </td>
        <td width="33%">
            <div class="btn" onclick="showTwogive()">第二次发放</div>
        </td>
    </tr>
</table>
<script>
    // $('.table1 td>div').css('height', $('.table1 td>div').css('width'));
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份 
            "d+": this.getDate(), //日 
            "h+": this.getHours(), //小时 
            "m+": this.getMinutes(), //分 
            "s+": this.getSeconds(), //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds() //毫秒 
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };
    function getCurrentDateformat(patten) {
        var myDate = new Date();
        return myDate.format(patten);
    };

    $(document).ready(function () {
        var myDate = new Date();
        getinfo(myDate);
    });
    function getinfo(myDate) {
        clearMonth();
        console.info(myDate.format('yyyy-MM-dd'));
        var date = myDate.format('yyyy-MM-01');
        var year = myDate.format('yyyy');
        var month = myDate.format('M');
        $('.title>span').html(year + '年' + month + '月工资信息');
        $('.title>span').attr('data-title', date);
        getSalary(date);
    };
    function preMonth() {
        var titleDate = $('.title>span').attr('data-title');
        var myDate = new Date(titleDate.replace("-", "/").replace("-", "/"));
        var myDate2 = caculMonth(myDate, -1);
        getinfo(myDate2);
    };
    function nextMonth() {
        var titleDate = $('.title>span').attr('data-title');
        var myDate = new Date(titleDate.replace("-", "/").replace("-", "/"));
        var myDate2 = caculMonth(myDate, 1);
        getinfo(myDate2);
    };
    function caculMonth(myDate, monthNum) {

        var year = myDate.getFullYear(); //获取当前日期的年份
        var month = myDate.getMonth() + 1; //获取当前日期的月份
        var day = myDate.getDate(); //获取当前日期的日
        var year2 = year;
        var month2 = parseInt(month) + parseInt(monthNum);
        if (month2 > 12) {
            year2 = parseInt(year2) + parseInt(parseInt(month2) / 12);
            month2 = parseInt(month2) % 12;
        }
        var myDate2 = new Date();
        myDate2.setFullYear(year2);
        myDate2.setMonth(month2 - 1);
        myDate2.setDate(day);
        return myDate2;
    };
    function getSalary(date) {
        var userid = Mobile_NS.getCurrUser();
        Mobile_NS.ajax("/mobilemode/zsws/salarysearch.jsp", { userid: userid, date: date }, function (responsedata) {
            var data = {};
            if (typeof (responsedata) == 'object') {
                data = responsedata;
            } else {
                data = $.parseJSON(responsedata);
            }
            if (data.flag) {
                RefreshMonth(data);
            } else {
                clearMonth();
            }
        });
    };
    function RefreshMonth(data) {
        $("#tj0").html('￥' + data["tj0"]);
        $("#shifa").html('￥' + data["shifa"]);
        $("#tj1").html(data["tj1"]);
        $("#tj2").html(data["tj2"]);
        $("#tj3").html(data["tj3"]);
        $("#tj4").html(data["tj4"]);
        $("#tj5").html(data["tj5"]);
        $("#tj6").html(data["tj6"]);
        $("#tj7").html(data["tj7"]);
        $("#tj8").html(data["tj8"]);
        $("#tj9").html(data["tj9"]);
    }
    function clearMonth() {
        $("#tj0").html('');
        $("#shifa").html('');
        $("#tj1").html('');
        $("#tj2").html('');
        $("#tj3").html('');
        $("#tj4").html('');
        $("#tj5").html('');
        $("#tj6").html('');
        $("#tj7").html('');
        $("#tj8").html('');
        $("#tj9").html('');
    }

    function showJiajian() {
        var titleDate = $('.title>span').attr('data-title');
        var url = '/mobilemode/appHomepageView.jsp?appHomepageId=62&date=' + titleDate;
        $u(url);
    }
    function showDetailed() {

    }
    function showTwogive() {

    }
    function showT1() {

    } 
    function showT2() {

    } 
    function showT3() {

    } 
    function showT4() {

    } 
    function showT5() {

    } 
    function showT6() {

    } 
    function showT7() {
        var titleDate = $('.title>span').attr('data-title');
        var url = '/mobilemode/appHomepageView.jsp?appHomepageId=64&date=' + titleDate;
        $u(url);
    } 
    function showT8() {

    } 
    function showT9() {

    } 
</script>